<template>
  <div class="grzxbj">
    <div class="selfinfo center">
      <div class="lfnav fl">
        <div class="ddzx">订单中心</div>
        <div class="subddzx">
          <ul>
            <li><a href="" >我的订单</a></li>
            <li><a href="">团购订单</a></li>
            <li><a href="">评价晒单</a></li>
          </ul>
        </div>
        <div class="ddzx">个人中心</div>
        <div class="subddzx">
          <ul>
            <li><a href="" style="color:#ff6700;font-weight:bold;">我的个人中心</a></li>
            <li><a href="">消息通知</a></li>
            <li><a href="">优惠券</a></li>
            <li><a href="">收货地址</a></li>
          </ul>
        </div>
      </div>
      <div class="rtcont fr">
        <div class="grzlbt ml40">我的资料</div>
        <div class="subgrzl ml40">
          <span>昵称</span>
          <span>
            <span v-show="flag">{{user.username}}</span>
          </span>
        </div>
        <div class="subgrzl ml40">
          <span>个性签名</span>
          <span>
            <span v-show="flag">{{user.personalizedSignature}}</span><el-input v-model="user.personalizedSignature" v-show="!flag"/>
          </span>
          <span>
            <el-button type="info" style="width: 50px" @click="flag=!flag" v-show="flag">编辑</el-button>
            <el-button type="info" style="width: 50px" v-show="!flag" @click="saveInfo">保存</el-button>
          </span>
        </div>
      </div>
      <div class="clear"></div>
    </div>
  </div>
</template>

<script>
import {useStore} from 'vuex'
import {computed, getCurrentInstance, onMounted, reactive, ref} from 'vue'
import {reqUpdateSignature} from "@/api";
import {ElMessage} from "element-plus";
export default {
  name: "MySelf",
  setup(){
    const store=useStore()
    const user=computed(()=>{
      return store.state.user.user
    })
    const flag=ref(true)
    const {proxy} = getCurrentInstance()
    const saveInfo=async ()=>{
        const result=await reqUpdateSignature(user.personalizedSignature)
        if (result.status==10000){
          ElMessage.success('更新成功')
          flag.value=!proxy.flag
        }else {
          ElMessage.error('系统异常')
        }
    }
    return {user,flag,saveInfo}
  }
}
</script>

<style scoped>
*{margin: 0;padding: 0;text-decoration: none;list-style-type: none;font-family: Times New Roman;}
img{border:none;}
a{border:none;text-decoration: none;color:#000;}
.center{margin: 0 auto;}
.fl{float: left;}
.fr{float: right;}
.clear{clear:both;}
.ml40{margin-left: 40px;}
.grzxbj{width: 100%;height:auto;background: rgb(245,245,245);padding-bottom: 20px;padding-top: 20px;}
.grzxbj .selfinfo{width: 1226px;}
.grzxbj .selfinfo .lfnav{width: 234px;height: 500px;background: #fff;}
.grzxbj .selfinfo .lfnav .ddzx{width: 234px;height: 40px;line-height: 40px;font-size: 19px; margin:30px 20px 10px 40px;color:rgb(51,51,51);}
.grzxbj .selfinfo .lfnav .subddzx ul li{display: block;width: 194px;height: 40px;line-height: 40px;padding-left: 40px;}
.grzxbj .selfinfo .lfnav .subddzx ul li a{color:rgb(117,117,117);}
.grzxbj .selfinfo .lfnav .subddzx ul li a:hover{color:rgb(51,51,51);}
.grzxbj .selfinfo .rtcont{width: 978px;height: 500px;background: #fff;}
.grzxbj .selfinfo .rtcont .ddzxbt{width: 938px;height: 60px;line-height: 60px;font-size: 22px;font-weight:bold;color:rgb(117,117,117);padding-left: 40px;border-bottom: 1px solid #ccc;}
.grzxbj .selfinfo .rtcont .grzlbt{width:938px;height: 60px;line-height: 60px;font-size: 20px;color:rgb(117,117,117);}
.grzxbj .selfinfo .rtcont .subgrzl{height: 45px;line-height: 45px;width: 900px;background: rgb(253,253,253);border:1px solid #aaa;margin-top: 10px;margin-bottom: 10px;border-radius: 3px;}
.grzxbj .selfinfo .rtcont .subgrzl span:nth-of-type(1){display: inline-block;font-size: 15px;font-weight: bold;color:rgb(117,117,117);width: 70px;height: 45px;line-height: 45px;padding-left: 20px;}
.grzxbj .selfinfo .rtcont .subgrzl span:nth-of-type(2){display: inline-block;font-size: 15px;color:rgb(117,117,117);width: 480px;height: 45px;line-height: 45px;padding-left: 120px;margin-top: -20px;
}
.grzxbj .selfinfo .rtcont .subgrzl span:nth-of-type(3){display: inline-block;font-size: 15px;width: 160px;height: 45px;line-height: 45px;text-align: right;}
.grzxbj .selfinfo .rtcont .subgrzl span a{color:teal; }
.grzxbj .selfinfo .rtcont .subgrzl span a:hover{color:#ff6700; }
</style>
